<!--
author: 何其沆(pooky)
desc: Others - Personal Settings
date: 2021-11-12
-->
<template>
  <div class="personal-settings">
    <a-spin :spinning="loading" tip="Loading...">
      <div class="personal-settings-top">
        <div class="max-of-target-clients">
          <e-title title="Max Of Target Clients" />
          <div class="progress">
            <div class="progress-intro">
              <span>{{ currentClientNums }}</span
              >/{{ maxClientNums }}
            </div>
            <div class="progress-content">
              <div v-if="maxClientNums === 0" style="width: 0" class="progress-content-mask"></div>
              <div
                v-else
                class="progress-content-mask"
                :style="{
                  width: (currentClientNums / maxClientNums) * 100 + '%'
                }"
              ></div>
            </div>
          </div>
        </div>
        <div class="annual-sales-plan">
          <e-title title="Annual Sales Plan" />
          <div class="plan-content">
            <div v-for="(item, index) in annualSalesPlanList" :key="index" class="plan-content-item">
              <div class="price">{{ addComma(String(item.revenueAmount)) }}</div>
              <div class="intro">
                <span v-if="item.type === 1">BU</span>
                <span v-if="item.type === 2">Branch</span>
                {{ item.bumName }} (RMB)
              </div>
            </div>
          </div>
          <div v-if="!annualSalesPlanList" class="plan-content1">
            <div class="content-one">
              <NoData fontSize="100px" />
              <span class="des">No Data</span>
            </div>
          </div>
        </div>
      </div>
      <div class="personal-settings-bottom">
        <div class="weekly-tasks">
          <e-title title="Weekly Tasks" />
          <div class="weekly-tasks-list">
            <div class="tasks-list-left">
              <div class="title-left">
                <div class="divide-line"></div>
              </div>
              <div class="title-left">Touched Clients</div>
              <div class="title-left">Responsive Clients</div>
              <div class="title-left">Positive Clients</div>
              <div class="title-left">Phase 3</div>
              <div class="title-left">Phase 2</div>
              <div class="title-left">Phase 1</div>
              <div class="title-left">Close Clients</div>
            </div>
            <div v-for="(item, index) in data" :key="index" class="tasks-list-item">
              <div class="item-title">BU {{ item.buName }}</div>
              <div class="item-info">{{ item.touchedClients }}</div>
              <div class="item-info">{{ item.responsiveClients }}</div>
              <div class="item-info">{{ item.positiveClients }}</div>
              <div class="item-info">{{ item.pThree }}</div>
              <div class="item-info">{{ item.pTwo }}</div>
              <div class="item-info">{{ item.pOne }}</div>
              <div class="item-info">{{ item.closeClients }}</div>
            </div>
            <div v-if="data.length === 0" class="tasks-list-item empty">
              <NoData fontSize="150px" />
              <span class="des">No Data</span>
            </div>
          </div>
        </div>
        <div class="commission-rate">
          <e-title title="Commission Rate" />
          <div class="commission-rate-banner">
            <banner title="Branch" :subTitle="commissionRate.branch" />
            <banner title="Currency" :fr="1" :subTitle="commissionRate.currency" />
          </div>
          <div style="position: relative">
            <div v-if="cYearsPercents.length > 0" class="sales-number">
              <div class="commission-rate-list">
                <div class="list-left">Number of years</div>
                <div class="list-right">Year Factor</div>
              </div>
              <commissionRateList
                v-for="(item, index) in cYearsPercents"
                :key="index"
                :listLeft="item.range"
                :listRight="item.per"
              />
            </div>
            <div
              v-if="cYearsPercents.length === 0"
              style="
                width: 24vw;
                min-width: 340px;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-top: 10px;
              "
            >
              <NoData fontSize="200px" />
              <span style="color: rgba(107, 121, 142, 0.85)">Not Set</span>
            </div>
            <div
              v-if="commissionRateType === 1"
              class="sales-number"
              style="margin-left: 24px; position: absolute; top: 0; left: 24vw"
            >
              <div class="commission-rate-list">
                <div class="list-left" style="width: 65%">Sales Amount</div>
                <div class="list-right" style="width: 35%">Commission Rate</div>
              </div>
              <commissionRateList
                v-for="(item, index) in cSalesAmountPercents"
                :key="index"
                :listLeft="item.range"
                :listRight="item.per"
                :type="1"
              />
            </div>
            <div
              v-if="commissionRateType === 2"
              class="sales-number"
              style="margin-left: 24px; position: absolute; top: -80px; left: 24vw"
            >
              <div class="c-year-quota">
                <a-space>
                  {{ cYearQuotas[0].sYear }} Year Quota
                  <a-tooltip>
                    <template #title>
                      The commission for existing accounts will be 3.5% under sales quota, and 5% for meeting above
                      annual sales.
                    </template>
                    <e-icon type="tips" style="margin-top: 5px; cursor: help" />
                  </a-tooltip>
                </a-space>
              </div>
              <div class="c-year-quota-data">{{ addComma(String(cYearQuotas[0].salesQuota)) }}</div>
              <div class="c-monthly-quota">
                <a-space>
                  {{ cYearQuotas[1].sYear }} Monthly Quota
                  <monthly-quota-tooltip />
                </a-space>
              </div>
              <div class="c-monthly-quota-data">
                <div v-for="(item, index) in cYearQuotas.slice(-12)" :key="index" class="monthly-item">
                  <span>{{ mon(item.sMonth) }}</span>
                  <span>{{ addComma(String(item.salesQuota)) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import ETitle from '@/components/ETitle.vue'
import EIcon from '@/components/EIcon.vue'
import NoData from '../../components/NoData.vue'
import MonthlyQuotaTooltip from '../../components/MonthlyQuotaTooltip.vue'
import banner from './components/banner.vue'
import commissionRateList from './components/commissionRateList.vue'
import { addComma } from '@/utils/h_utils.js'

import usePersonalSettings from './hooks/usePersonalSettings'

const mon = usePersonalSettings().getMonth
const loading = ref(false)
const maxClientNums = ref()
const currentClientNums = ref()
const data = ref([])
const annualSalesPlanList = ref([])

const commissionRate = reactive({
  branch: '',
  currency: ''
})
const commissionRateType = ref()
const cYearsPercents = ref([])
const cSalesAmountPercents = ref([])
const cYearQuotas = ref([])
/**
 * 获取数据
 */
const getData = async () => {
  const usePs = await usePersonalSettings()
  usePs
    .getData()
    .then(() => {
      loading.value = usePs.loading.value
      maxClientNums.value = usePs.maxClientNums.value
      currentClientNums.value = usePs.currentClientNums.value
      data.value = usePs.data.value
      annualSalesPlanList.value = usePs.annualSalesPlanList.value
      commissionRate.branch = usePs.commissionRate.branch
      commissionRate.currency = usePs.commissionRate.currency
      commissionRateType.value = usePs.commissionRateType.value
      cYearsPercents.value = usePs.cYearsPercents.value
      cSalesAmountPercents.value = usePs.cSalesAmountPercents.value
      cYearQuotas.value = usePs.cYearQuotas.value
      cYearQuotas.value = usePs.cYearQuotas.value
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
/**
 * 初始化
 */
onMounted(() => {
  getData()
})
</script>

<style scoped lang="less">
.personal-settings {
  width: 100%;
  .personal-settings-top {
    width: 100%;
    height: 148px;
    display: flex;
    .max-of-target-clients {
      width: 284px;
      height: 100%;
      background-color: @white;
      border-radius: 4px;
      box-shadow: 0 1px 3px @shadow-color;
      margin-right: 24px;
      padding-top: 32px;
      padding-left: 24px;
      padding-right: 24px;
      box-sizing: border-box;
      .progress {
        width: 100%;
        margin-top: 20px;
        .progress-intro {
          color: @text-gray;
          font-size: 14px;
          font-weight: 700;
          padding-left: 12px;
          span {
            font-size: 24px;
            font-weight: 700;
            color: @black-85p;
          }
        }
        .progress-content {
          width: 100%;
          height: 6px;
          margin-top: 5px;
          background-color: @bg-color;
          position: relative;
          .progress-content-mask {
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: @border-color;
          }
        }
      }
    }
    .annual-sales-plan {
      flex: 1;
      background-color: @white;
      border-radius: 4px;
      box-shadow: 0 1px 3px @shadow-color;
      padding-top: 32px;
      padding-left: 24px;
      .plan-content {
        width: 100%;
        height: 50px;
        margin-top: 21px;
        display: flex;
        align-items: center;
        .plan-content-item {
          height: 100%;
          margin-right: 120px;
          padding-left: 13px;
          .price {
            font-weight: 700;
            color: @text-black;
            font-size: 20px;
          }
          .intro {
            color: @text-gray;
            font-size: 14px;
          }
        }
      }
      .plan-content1 {
        width: 100%;
        height: 50px;
        margin-top: 21px;
        .content-one {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-top: -130px;
          .des {
            color: @text-gray;
          }
        }
      }
    }
  }
  .personal-settings-bottom {
    width: 100%;
    background-color: @white;
    margin-top: 24px;
    border-radius: 4px;
    box-shadow: 0 1px 3px @shadow-color;
    display: flex;
    padding-bottom: 24px;
    .weekly-tasks {
      padding-top: 32px;
      padding-left: 24px;
      .weekly-tasks-list {
        margin-top: 20px;
        box-sizing: border-box;
        border: 1px solid @border-color;
        border-top: none;
        display: flex;
        .tasks-list-left {
          width: 14.58vw;
          .title-left {
            width: 100%;
            height: 40px;
            position: relative;
            background-color: @bg-color;
            font-size: 14px;
            color: @text-gray;
            display: flex;
            padding-left: 12px;
            border-top: 1px solid @border-color;
            align-items: center;
            .divide-line {
              width: 100%;
              height: 1px;
              background-color: @border-color;
              position: absolute;
              top: 50%;
              left: 0;
              transform: translateY(-50%) rotate(8deg);
            }
          }
        }
        .tasks-list-item {
          .item-title {
            width: 100%;
            min-width: 80px;
            height: 40px;
            padding: 0 12px;
            font-size: 14px;
            color: @text-gray;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top: 1px solid @border-color;
            border-left: 1px solid @border-color;
            background-color: @bg-color;
          }
          .item-info {
            border-top: 1px solid @border-color;
            border-left: 1px solid @border-color;
            display: flex;
            height: 40px;
            justify-content: flex-end;
            padding-right: 12px;
            align-items: center;
            font-size: 16px;
            color: #404040;
            font-weight: 700;
          }
        }
        .empty {
          border-top: 1px solid @border-color;
          border-left: 1px solid @border-color;
          width: 15.625vw;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .des {
            color: @text-gray;
          }
        }
      }
    }
    .commission-rate {
      flex: 1;
      padding-top: 32px;
      padding-left: 6vw;
      .commission-rate-banner {
        display: flex;
        justify-content: space-between;
        width: 24vw;
        margin-top: 20px;
      }
      .sales-number {
        margin-top: 20px;
        width: 24vw;
        min-width: 340px;
        border: 1px solid @border-color;
        display: inline-block;
        .c-year-quota,
        .c-monthly-quota {
          width: 100%;
          height: 40px;
          background-color: @bg-color;
          border-bottom: 1px solid @border-color;
          font-size: 14px;
          color: @text-gray;
          display: flex;
          align-items: center;
          padding-left: 12px;
        }
        .c-year-quota-data {
          width: 100%;
          height: 40px;
          border-bottom: 1px solid @border-color;
          font-size: 14px;
          color: rgba(30, 30, 30, 0.85);
          display: flex;
          align-items: center;
          padding-left: 12px;
        }
        .c-monthly-quota-data {
          width: 100%;
          box-sizing: border-box;
          height: calc(100% - 120px);
          display: flex;
          flex-wrap: wrap;
          .monthly-item {
            width: 25%;
            height: 60px;
            border-bottom: 1px solid @border-color;
            border-right: 1px solid @border-color;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 12px;
            span:first-child {
              font-size: 14px;
              color: @text-gray;
            }
            span:last-child {
              font-size: 14px;
              color: rgba(30, 30, 30, 0.85);
            }
            &:nth-child(4n) {
              border-right: none;
            }
            &:nth-child(9),
            &:nth-child(10),
            &:nth-child(11),
            &:nth-child(12) {
              border-bottom: none;
            }
          }
        }
      }
      .commission-rate-list {
        width: 100%;
        height: 40px;
        line-height: 40px;
        display: flex;
        border-bottom: 1px solid @border-color;
        &:last-child {
          border-bottom: none;
        }
        .list-left,
        .list-right {
          width: 50%;
          font-size: 14px;
          background-color: @bg-color;
          color: @text-gray;
        }
        .list-left {
          border-right: 1px solid @border-color;
          padding-left: 11px;
        }
        .list-right {
          display: flex;
          align-items: center;
          flex-direction: row-reverse;
          padding-right: 9px;
        }
      }
    }
  }
}
</style>
<route lang="yaml">
name: Personal Settings
path: /personal-settings/
</route>
